<template>
  <view>
    <!-- 头部及背景色 -->
    <backdrop />
    <navigation back backColor title="匠人" />

    <u-sticky>
      <view class="sticky">
        <backdrop
          :style="'margin-top:' + -(system.statusBarHeight + 44) + 'px'"
        />
        <view class="container">
          <view class="page-container">
            <view class="sift-view flex flex-middle">
              <view
                class="sift-item flex flex-center flex-middle"
                :class="{ active: index == siftIndex }"
                v-for="(item, index) in siftList"
                :key="index"
                @click="changeSift(index)"
              >
                {{ item }}
                <u-icon
                  class="icon"
                  name="arrow-down-fill"
                  size="8"
                  :color="index == siftIndex ? '#333333' : '#C1C1C1'"
                  v-show="index == siftIndex"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-sticky>

    <view class="container">
      <view class="page-container">
        <view class="skeleton-view" v-if="loading">
          <view
            class="skeleton-item"
            v-for="(item, index) in Array(3)"
            :key="index"
          >
            <u-skeleton rows="3" loading :title="false" />
          </view>
        </view>

        <block v-else>
          <craftsman-list select :list="list" />
        </block>

        <u-loadmore class="loadmore" :status="loadStatus" />
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { getTimeCraftsman } from "@/api/craftsman";

export default {
  data() {
    return {
      siftIndex: 0,
      siftList: ["智能排序", "评分", "距离"],
      page: 1,
      list: [],
      loading: false,
      totalPage: 0,
      id: "",
      time: "",
    };
  },
  computed: {
    ...mapGetters(["system"]),
    loadStatus: {
      get() {
        let str = this.loading
          ? "loading"
          : this.totalPage <= this.page
          ? "nomore"
          : "loadmore";
        return str;
      },
      set() {},
    },
  },
  onPullDownRefresh() {
    this.refresh();
  },
  onReachBottom() {
    if (this.totalPage <= this.page) return;
    this.page += 1;
    this.getTimeCraftsman();
  },
  onLoad({ id, time }) {
    this.id = id;
    this.time = time;
    this.refresh();
  },
  methods: {
    refresh() {
      this.list = [];
      this.page = 1;
      this.getTimeCraftsman();
    },
    async getTimeCraftsman() {
      this.loading = true;
      const { data, code } = await getTimeCraftsman({
        serviceId: this.id,
        time: this.time,
        page: this.page,
      });
      this.loading = false;
      uni.stopPullDownRefresh();
      if (code !== 200) return;
      this.list = this.list.concat(data.list);
      this.totalPage = data.totalPage;
    },
    changeSift(index) {
      if (this.load) return; // 节流
      this.siftIndex = index;
      this.refresh();
    },
  },
};
</script>

<style scoped lang="scss">
.skeleton-view {
  .skeleton-item {
    padding: 20px 0;
  }
}

.loadmore {
  margin: 0 !important;
  padding: 16px 0;
}

.sticky {
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid #ccc;
  background: #fff;
}

.sift-view {
  height: 34px;

  .active {
    color: #333333 !important;
  }

  .sift-item {
    height: 34px;
    width: 33.33%;
    color: #c1c1c1;

    .icon {
      margin-left: 4px;
    }
  }
}

.container {
  position: relative;
  padding: 0 16px;
}
</style>